<template>
    <div class="interact-item">
        <div class="item-left">
            <div class="item-left__imgBox">
                <img class="item-left__img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg" alt="">
            </div>
        </div>
        <div class="item-right">
            <div class="item-right__mainContent border-bottom">
                <div class="item-right__hd">
                    <span class="item-right__username">啦啦啦</span>
                    <span class="item-right__replytime">时间:2018.08.28</span>
                </div>
                <div class="item-right__bd">
                    <div class="item-right__content">
                        <div class="item-right__contentText">{{this.dataText}}</div>
                    </div>
                </div>
            </div>
            <div class="item-right__replyContent" v-if="replyText != ''">
                <div class="item-right__reply">
                    <div class="item-right__replyTitle">商家 回复 啦啦啦</div>
                    <div class="item-right__replyCont">{{this.replyText}}</div>
                    <div class="item-right__replyTime">2分钟前</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'comment-item',
    props: {
        dataText: String,
        replyText: String
    }
}
</script>

<style lang="stylus" scoped>
.interact-item
    overflow: hidden
    display: flex
    .item-left   
        width: .6rem
        margin-right: .2rem
        .item-left__imgBox
            margin: 0 auto
            width: .6rem
            height: .6rem
            border-radius: 50%
            overflow: hidden
            .item-left__img
                width: 100%
                height: 100%
    .item-right
        flex: 1
        .item-right__mainContent
            padding-bottom: .2rem
            .item-right__hd
                position: relative
                .item-right__username
                    font-size: .30rem
                    color: #666666
                .item-right__replytime
                    font-size: .24rem
                    color: #ccc
                    position: absolute
                    bottom: 0
                    right: 0
            .item-right__bd
                margin-top: .16rem
                .item-right__contentText
                    font-size: .32rem
                    line-height: .4rem
                    margin-bottom: .15rem
                .item-right__actName
                    font-size: .20rem
                    color: #000cfa
                    text-align: right
                .item-right__contentImg
                    width: 4.94rem
                    margin-top: .3rem
                    .item-right__contentFigure
                        position: relative
                        width: 100%
                        height: 0
                        overflow: hidden
                        margin: 0
                        padding-bottom: 100%
                        background-position: center
                        background-repeat: no-repeat
                        background-size: cover
        .item-right__replyContent
            padding: 0 .2rem
            box-sizing: border-box
            .item-right__reply
                margin-top: .2rem
                .item-right__replyTitle
                    font-size: .30rem
                    color: #666666
                    margin-bottom: .15rem
                .item-right__replyCont
                    font-size: .32rem
                    line-height: .4rem
                    margin-bottom: .15rem
                .item-right__replyTime
                    font-size: .24rem
                    color: #ccc
        .border-bottom
            border-bottom: 1px solid #eee
</style>

